<template>
  <el-card style="box-shadow: none;">
    <div class="container" >

      <div class="row row--top-40" style="display: flex; align-items: center;">
        <div class="col-md-12" style="display: flex; align-items: center;">
          <svg t="1707295744799" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="1302" width="30" height="30"><path d="M481.28 204.8c158.35136 0 286.72 128.36864 286.72 286.72 0 70.7584-25.64096 135.53664-68.11648 185.5488l123.12576 123.2896a15.36 15.36 0 1 1-21.72928 21.7088l-122.51136-122.6752A285.73696 285.73696 0 0 1 481.28 778.24c-158.35136 0-286.72-128.36864-286.72-286.72s128.36864-286.72 286.72-286.72z m0 30.72C339.88608 235.52 225.28 350.12608 225.28 491.52s114.60608 256 256 256S737.28 632.91392 737.28 491.52s-114.60608-256-256-256z" fill="#062C3D" p-id="1303"></path><path d="M356.47488 507.4944c12.98432 32.0512 32.78848 57.9584 59.63776 78.1312 27.32032 20.52096 60.53888 34.93888 99.86048 43.17184l-8.3968 40.09984c-44.99456-9.4208-83.7632-26.25536-116.08064-50.52416-32.80896-24.65792-57.22112-56.58624-72.97024-95.49824l37.94944-15.36z" fill="#76cb02" p-id="1304" data-spm-anchor-id="a313x.collections_detail.0.i0.33973a817vAg9o" class="selected"></path></svg>
          <h2 class="row__title" style="margin-left: 10px; justify-content: flex-start;">筛选搜索</h2>
        </div>
      </div>
      <el-row>
        <div class="form-control">
          <input type="text" required v-model="inputNumber" @keyup.enter="searchDataList" clearable/>
          <label>
            <span style="transition-delay:0ms">输</span><span style="transition-delay:50ms">入</span><span style="transition-delay:100ms">学</span><span style="transition-delay:150ms">号</span>
          </label>
        </div >
        <ul class="form-control" style="margin-left: -5px;margin-top: 30px">
          <li class="icon-content">
            <form>
              <button
                  class="link"
                  data-social="inputDate"
                  type="button"
                  @click="searchDataList"
              >
                <svg t="1707225141071" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                     p-id="1299" width="200" height="200">
                  <path d="M902.174374 942.511058c6.66684 6.66684 15.400758 9.999748 24.133653 9.999748s17.466814-3.332908 24.13263-9.999748c13.33368-13.332656 13.33368-34.932604 0-48.266283L816.820404 760.610194c79.380932-79.128175 124.171044-186.079022 124.171044-299.366182 0-233.349629-189.833533-423.183162-423.183162-423.183162-233.333256 0-423.166789 189.834556-423.166789 423.184185s189.833533 423.183162 423.166789 423.183162c35.750225 0 72.399937-4.933359 108.932991-14.650675 18.23327-4.849448 29.067013-23.532973 24.216541-41.74987-4.833075-18.216897-23.532973-29.049616-41.74987-24.216541-30.815843 8.200776-61.566194 12.350283-91.399663 12.350283-195.700147 0-354.899986-159.216211-354.899986-354.916359s159.199839-354.916359 354.899986-354.916359 354.916359 159.216211 354.916359 354.916359c0 106.899682-47.566342 207.082382-130.516566 274.866185-14.59951 11.932774-16.766872 33.432437-4.833075 48.03297"
                        fill="currentColor" p-id="1300"></path>
                </svg>
              </button>
            </form>
          </li>
        </ul>
      </el-row>
    </div>
  </el-card>
  <el-card style="box-shadow: none;margin-top: 20px" >
    <div class="container" style="margin-left: 30px">
      <div class="row row--top-40" style="display: flex; align-items: center;">
        <div class="col-md-12" style="display: flex; align-items: center;">
          <svg t="1708411655166" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16046" id="mx_n_1708411655166" data-spm-anchor-id="a313x.search_index.0.i10.129b3a81vaR55s"
               width="26" height="26"><path d="M764.945067 915.933867H259.054933a95.675733 95.675733 0 0 1-95.573333-95.573334v-590.165333a95.675733 95.675733 0 0 1 95.573333-95.573333H334.506667a27.306667 27.306667 0 0 1 0 54.613333h-75.451734a40.96 40.96 0 0 0-40.96 40.96v590.165333a40.96 40.96 0 0 0 40.96 40.96h505.890134a40.96 40.96 0 0 0 40.96-40.96v-590.165333a40.96 40.96 0 0 0-40.96-40.96h-75.3664a27.306667 27.306667 0 0 1 0-54.613333h75.3664a95.675733 95.675733 0 0 1 95.573333 95.573333v590.165333a95.675733 95.675733 0 0 1-95.573333 95.573334z" fill="#464545" p-id="16047" data-spm-anchor-id="a313x.search_index.0.i9.129b3a81vaR55s" class="selected"></path><path d="M281.992533 404.258133a23.978667 23.978667 0 0 1-2.696533-0.136533c-0.8704 0-1.706667-0.221867-2.645333-0.392533s-1.706667-0.392533-2.594134-0.648534-1.706667-0.5632-2.5088-0.904533-1.706667-0.733867-2.423466-1.143467-1.553067-0.887467-2.286934-1.365333-1.467733-1.041067-2.167466-1.604267-1.348267-1.160533-1.979734-1.792a27.477333 27.477333 0 0 1-8.004266-19.3024 23.586133 23.586133 0 0 1 0.136533-2.696533c0.085333-0.887467 0.221867-1.706667 0.392533-2.645333a23.1424 23.1424 0 0 1 0.6656-2.594134c0.256-0.853333 0.5632-1.706667 0.887467-2.525866s0.733867-1.621333 1.143467-2.4064 0.887467-1.553067 1.3824-2.304 1.024-1.467733 1.5872-2.1504a25.122133 25.122133 0 0 1 1.809066-1.9968c0.631467-0.631467 1.297067-1.2288 1.979734-1.809067s1.416533-1.092267 2.167466-1.5872a23.773867 23.773867 0 0 1 2.286934-1.365333 26.112 26.112 0 0 1 2.423466-1.143467c0.8192-0.341333 1.706667-0.648533 2.5088-0.904533s1.706667-0.477867 2.594134-0.648534a23.552 23.552 0 0 1 2.645333-0.392533 25.736533 25.736533 0 0 1 5.376 0 22.9888 22.9888 0 0 1 2.645333 0.392533 27.0848 27.0848 0 0 1 5.12 1.553067 29.252267 29.252267 0 0 1 4.7104 2.5088 24.951467 24.951467 0 0 1 2.1504 1.5872c0.699733 0.580267 1.365333 1.1776 1.9968 1.809067a25.122133 25.122133 0 0 1 1.809067 1.9968c0.5632 0.682667 1.092267 1.416533 1.5872 2.1504a26.350933 26.350933 0 0 1 1.365333 2.304 25.8048 25.8048 0 0 1 1.143467 2.4064 28.78464 28.78464 0 0 1 1.570133 5.12c0.187733 0.887467 0.3072 1.706667 0.392534 2.645333s0.136533 1.706667 0.136533 2.696533 0 1.792-0.136533 2.679467-0.221867 1.706667-0.392534 2.645333-0.4096 1.706667-0.6656 2.594134A25.821867 25.821867 0 0 1 307.2 387.413333a26.112 26.112 0 0 1-1.143467 2.423467 23.773867 23.773867 0 0 1-1.365333 2.286933 25.224533 25.224533 0 0 1-1.5872 2.167467c-0.5632 0.682667-1.1776 1.365333-1.809067 1.9968a29.678933 29.678933 0 0 1-4.1472 3.413333c-0.733867 0.477867-1.518933 0.938667-2.304 1.365334s-1.5872 0.802133-2.4064 1.143466-1.706667 0.631467-2.525866 0.904534a26.197333 26.197333 0 0 1-2.594134 0.648533c-0.8704 0.170667-1.706667 0.3072-2.645333 0.392533a23.483733 23.483733 0 0 1-2.679467 0.1024zM281.992533 568.32a27.5456 27.5456 0 0 1-19.3024-7.9872c-0.631467-0.631467-1.245867-1.314133-1.809066-1.9968s-1.092267-1.416533-1.5872-2.167467-0.955733-1.501867-1.3824-2.286933a29.986133 29.986133 0 0 1-2.030934-4.932267c-0.273067-0.853333-0.477867-1.706667-0.6656-2.594133s-0.3072-1.706667-0.392533-2.645333-0.136533-1.792-0.136533-2.696534 0-1.792 0.136533-2.679466 0.221867-1.706667 0.392533-2.645334 0.392533-1.706667 0.6656-2.594133a26.146133 26.146133 0 0 1 0.904534-2.525867 25.6 25.6 0 0 1 1.1264-2.4064 27.921067 27.921067 0 0 1 2.9696-4.4544 25.122133 25.122133 0 0 1 1.809066-1.9968 27.306667 27.306667 0 0 1 38.6048 0 25.122133 25.122133 0 0 1 1.809067 1.9968c0.5632 0.682667 1.092267 1.416533 1.5872 2.1504a24.046933 24.046933 0 0 1 1.365333 2.304 25.8048 25.8048 0 0 1 1.143467 2.4064 26.146133 26.146133 0 0 1 0.904533 2.525867c0.256 0.853333 0.477867 1.706667 0.6656 2.594133s0.3072 1.706667 0.392534 2.645334 0.136533 1.792 0.136533 2.679466 0 1.706667-0.136533 2.696534-0.221867 1.706667-0.392534 2.645333-0.4096 1.706667-0.6656 2.594133a25.821867 25.821867 0 0 1-0.904533 2.5088 26.112 26.112 0 0 1-1.143467 2.423467 23.773867 23.773867 0 0 1-1.365333 2.286933c-0.494933 0.750933-1.024 1.467733-1.5872 2.167467s-1.1776 1.365333-1.809067 1.9968a27.5456 27.5456 0 0 1-19.3024 7.9872zM281.992533 732.279467c-0.887467 0-1.706667 0-2.696533-0.136534s-1.706667-0.221867-2.645333-0.392533-1.706667-0.4096-2.594134-0.6656-1.706667-0.5632-2.5088-0.904533a26.112 26.112 0 0 1-2.423466-1.143467 23.773867 23.773867 0 0 1-2.286934-1.365333c-0.750933-0.494933-1.467733-1.024-2.167466-1.5872s-1.348267-1.1776-1.979734-1.809067a25.122133 25.122133 0 0 1-1.809066-1.9968 27.921067 27.921067 0 0 1-4.113067-6.8608 26.043733 26.043733 0 0 1-0.887467-2.525867 21.947733 21.947733 0 0 1-0.6656-2.577066c-0.170667-0.887467-0.3072-1.706667-0.392533-2.6624a26.368 26.368 0 0 1 0-5.358934c0.085333-0.887467 0.221867-1.706667 0.392533-2.6624a23.1424 23.1424 0 0 1 0.6656-2.594133c0.256-0.836267 0.546133-1.706667 0.887467-2.5088s0.733867-1.706667 1.143467-2.423467 0.887467-1.553067 1.3824-2.286933 1.024-1.467733 1.5872-2.167467 1.1776-1.365333 1.809066-1.9968 1.297067-1.2288 1.979734-1.792 1.416533-1.109333 2.167466-1.604266 1.501867-0.938667 2.286934-1.365334 1.604267-0.802133 2.423466-1.143466 1.706667-0.631467 2.5088-0.887467 1.706667-0.477867 2.594134-0.6656 1.706667-0.3072 2.645333-0.392533a25.736533 25.736533 0 0 1 5.376 0c0.887467 0.085333 1.706667 0.221867 2.6624 0.392533a25.924267 25.924267 0 0 1 2.577067 0.6656c0.853333 0.256 1.706667 0.5632 2.525866 0.887467s1.706667 0.733867 2.423467 1.143466 1.553067 0.887467 2.286933 1.365334a29.678933 29.678933 0 0 1 4.1472 3.413333c0.631467 0.631467 1.245867 1.314133 1.809067 1.9968s1.092267 1.416533 1.5872 2.167467a23.773867 23.773867 0 0 1 1.365333 2.286933A26.112 26.112 0 0 1 307.2 694.613333c0.341333 0.8192 0.648533 1.706667 0.904533 2.5088s0.477867 1.706667 0.648534 2.594134a23.893333 23.893333 0 0 1 0.4096 2.6624c0 0.887467 0.136533 1.792 0.136533 2.679466s0 1.792-0.136533 2.679467a23.893333 23.893333 0 0 1-0.4096 2.6624 25.856 25.856 0 0 1-0.648534 2.577067 26.146133 26.146133 0 0 1-0.904533 2.525866 25.8048 25.8048 0 0 1-1.143467 2.4064 24.046933 24.046933 0 0 1-1.365333 2.304c-0.494933 0.733867-1.024 1.467733-1.5872 2.1504a26.965333 26.965333 0 0 1-5.956267 5.393067 23.773867 23.773867 0 0 1-2.286933 1.365333 27.665067 27.665067 0 0 1-4.949333 2.048c-0.836267 0.256-1.706667 0.477867-2.577067 0.6656s-1.706667 0.3072-2.6624 0.392534-1.792 0.0512-2.679467 0.0512zM604.7744 404.2752H361.813333a27.306667 27.306667 0 1 1 0-54.613333h242.961067a27.306667 27.306667 0 0 1 0 54.613333zM604.7744 568.32H361.813333a27.306667 27.306667 0 1 1 0-54.613333h242.961067a27.306667 27.306667 0 0 1 0 54.613333zM604.7744 732.279467H361.813333a27.306667 27.306667 0 0 1 0-54.613334h242.961067a27.306667 27.306667 0 0 1 0 54.613334zM750.062933 404.2752h-63.266133a27.306667 27.306667 0 1 1 0-54.613333h63.266133a27.306667 27.306667 0 0 1 0 54.613333zM750.062933 568.32h-63.266133a27.306667 27.306667 0 0 1 0-54.613333h63.266133a27.306667 27.306667 0 0 1 0 54.613333zM750.062933 732.279467h-63.266133a27.306667 27.306667 0 0 1 0-54.613334h63.266133a27.306667 27.306667 0 0 1 0 54.613334zM669.098667 242.6368H354.986667a47.786667 47.786667 0 0 1-47.786667-47.786667V149.026133a47.786667 47.786667 0 0 1 47.786667-47.786666h314.197333a47.786667 47.786667 0 0 1 47.786667 47.786666v45.824a47.786667 47.786667 0 0 1-47.872 47.786667z m-307.370667-54.613333h300.544V155.8528H361.813333z" fill="#76cb02" p-id="16048" data-spm-anchor-id="a313x.search_index.0.i11.129b3a81vaR55s" class=""></path></svg>
          <h2 class="row__title" style="margin-left: 10px; justify-content: flex-start;">数据列表</h2>
        </div>
      </div>
      <div class="row row--top-20">
        <div class="col-md-12">
          <div class="table-container">
            <!-- 数据表单 -->
            <el-table :data="dataList"
                      style="width: 100%;margin-top: 10px"
                      ref="multipleTable"
                      :row-class-name="tableRowClassName">
              <el-table-column fixed prop="id" align="center" />
              <el-table-column label="免冠照片" align="center" prop="bareheadedPhotoRouter">
                <template #default="scope">
                  <div class="avatar-with-button"
                       @mouseover="scope.row.showButton = true"
                       @mouseleave="scope.row.showButton = false">
                    <el-avatar
                        v-if="scope.row.bareheadedPhotoRouter"
                        :src="scope.row.bareheadedPhotoRouter"
                        :size="50"
                    ></el-avatar>
                    <el-avatar v-else :size="50">
                      <svg t="1707408995661" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6886" width="200" height="200"><path d="M10.867336 511.051759C10.867336 787.289209 234.814309 1011.223706 511.051759 1011.223706S1011.223706 787.289209 1011.223706 511.051759 787.289209 10.879813 511.051759 10.879813 10.867336 234.814309 10.867336 511.051759z m0 0" fill="#FFFFFF" p-id="6887"></path><path d="M511.051759 1022.103519C228.800468 1022.103519 0 793.303051 0 511.051759S228.800468 0 511.051759 0s511.051759 228.800468 511.05176 511.051759c-0.361829 282.089093-228.95019 510.689931-511.05176 511.05176z m0-1000.293986C240.803197 21.809533 21.747149 240.815674 21.747149 511.051759S240.803197 1000.35637 511.051759 1000.35637 1000.35637 781.287845 1000.35637 511.051759c-0.361829-270.086363-219.218247-488.942782-489.304611-489.242226z m0 0" fill="#EBEBEB" p-id="6888"></path><path d="M511.051759 10.879813C234.814309 10.879813 10.867336 234.814309 10.867336 511.051759S234.814309 1011.223706 511.051759 1011.223706 1011.223706 787.289209 1011.223706 511.051759A500.171947 500.171947 0 0 0 511.051759 10.879813zM507.807779 186.154596a150.707866 150.707866 0 1 1-106.564773 44.143094A150.707866 150.707866 0 0 1 507.807779 186.154596zM244.221854 784.145043c-1.522176-153.46525 73.937811-250.260649 168.961497-287.87835l97.207135 162.199044 101.998246-158.318744c91.330539 40.013257 163.758651 134.824837 165.26835 284.472171a712.428112 712.428112 0 0 1-533.435228-0.474121z m0 0" fill="#EAEAEA" p-id="6889"></path></svg>
                    </el-avatar>
                    <el-button v-show="scope.row.showButton"
                               class="view-button"
                               type="text"
                               @click="getBareheadedPhotoData(scope.row)"
                               :class="['avatar-button']">
                      查看
                    </el-button>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="学号" prop="studentNumber" align="center"/>
              <el-table-column prop="state" label="认证状态" align="left">
                <template #default="scope">
                  <div>
                    <el-text class="mx-1" type="warning" v-if="scope.row.state === 1">● 待提交</el-text>
                    <el-text class="mx-1" type="warning" v-if="scope.row.state === 2">● 待审核</el-text>
                    <el-text class="mx-1" type="primary" v-if="scope.row.state === 3">● 已通过</el-text>
                    <el-text class="mx-1" type="danger" v-if="scope.row.state === 4">● 未通过</el-text>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="录取通知书" align="center" prop="admissionNotice" width="140">
                <template #default="scope">
                  <el-text class="mx-1" v-if="!scope.row.admissionNotice">未上传</el-text>
                  <el-button type="text" v-else @click="getAdmissionNoticeData(scope.row)" :class="['custom-button']">查看</el-button>
                </template>
              </el-table-column>
              <el-table-column label="身份证人像面" align="center" prop="idCardFace" width="140">
                <template #default="scope">
                  <el-text class="mx-1" v-if="!scope.row.idCardFace">未上传</el-text>
                  <el-button type="text" v-else @click="getIdCardFaceData(scope.row)" :class="['custom-button']">查看</el-button>
                </template>
              </el-table-column>
              <el-table-column label="身份证国徽面" align="center" prop="idCardNational" width="140">
                <template #default="scope">
                  <el-text class="mx-1" v-if="!scope.row.idCardNational">未上传</el-text>
                  <el-button type="text" v-else @click="getIdCardNational(scope.row)" :class="['custom-button']">查看</el-button>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" fixed="right">
                <template #default="scope">
                  <el-button type="text" @click="approveData(scope.row)" :class="['custom-button']">通过</el-button>
                  <el-text>|</el-text>
                  <el-button type="text" @click="disapproveData(scope.row)" :class="['refuse-button']">不通过</el-button>
                </template>
              </el-table-column>
              <template v-slot:empty>
                <el-empty image-size="80"></el-empty>
              </template>
            </el-table>
            <div class="block">
              <!-- 页号 -->
              <el-pagination
                  v-model:current-page="pageIndex"
                  v-model:page-size="pageSize"
                  :page-sizes="[5,10,15, 20]"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalPage"
                  @size-change="sizeChangeHandle"
                  @current-change="CurrentChangeHandle"
                  style="margin-top: 30px"
              />
            </div>
            <!-- 免冠照片顯示 -->
            <div>
              <el-dialog
                  v-model="bareheadedPhotoVisible"
                  center
                  width="30%"
                  height="50%"
              >
                <el-main>
                  <div class="block">
                    <el-image v-if="bareheadedPhotoRouter" :src="bareheadedPhotoRouter" fit="contain"></el-image>
                  </div>
                  <div>
                    <el-text class="row__text" style="margin-left: 10px">学号</el-text>
                    <span class="row__text" style="margin-left: 2px">{{ studentNum }}</span>
                    <el-text class="row__text" style="margin-left: 2px">学生的免冠照片</el-text>
                  </div>
                </el-main>
              </el-dialog>
            </div>
            <!-- 录取通知书顯示 -->
            <div>
              <el-dialog
                  v-model="admissionNoticeVisible"
                  center
                  width="30%"
              >
                <el-main>
                  <div class="block">
                    <el-image v-if="admissionNoticeRouter" :src="admissionNoticeRouter"></el-image>
                  </div>
                  <div>
                    <el-text class="row__text" style="margin-left: 10px">学生</el-text>
                    <span class="row__text" style="margin-left: 2px">{{ studentNum }}</span>
                    <el-text class="row__text" style="margin-left: 2px">的录取通知书</el-text>
                  </div>
                </el-main>
              </el-dialog>
            </div>

            <!-- 身份证人像面 -->
            <div>
              <el-dialog
                  v-model="idCardFaceVisible"
                  center
                  width="30%"
              >
                <el-main>
                  <div class="block">
                    <el-image v-if="idCardFaceRouter" :src="idCardFaceRouter"></el-image>
                  </div>
                  <div>
                    <el-text class="row__text" style="margin-left: 10px">学生</el-text>
                    <span class="row__text" style="margin-left: 2px">{{ studentNum }}</span>
                    <el-text class="row__text" style="margin-left: 2px">的身份证人像面</el-text>
                  </div>
                </el-main>
              </el-dialog>
            </div>

            <!-- 身份证国徽面顯示 -->
            <div>
              <el-dialog
                  v-model="idCardNationalVisible"
                  center
                  width="30%"
              >
                <el-main>
                  <div class="block">
                    <el-image v-if="idCardNationalRouter" :src="idCardNationalRouter"></el-image>
                  </div>
                  <div>
                    <el-text class="row__text" style="margin-left: 10px">学生</el-text>
                    <span class="row__text" style="margin-left: 2px">{{ studentNum }}</span>
                    <el-text class="row__text" style="margin-left: 2px">的身份证国徽面</el-text>
                  </div>
                </el-main>
              </el-dialog>
            </div>

            <!-- 确认通過弹窗 -->
            <div>
              <el-dialog
                  v-model="approveDialogVisible"
                  title="提示"
                  center
                  width="20%"
                  :custom-class="'rounded-dialog'"
              >
                <div style="text-align: center;">
                  <el-text class="mx-1" style="margin-left: 10px">确定通过审核吗?</el-text>
                </div>
                <template #footer>
                <span class="dialog-footer" >
                  <el-button type="primary"  style="margin-bottom: 10px" @click="submitUpdate">确定</el-button>
                  <el-button type="primary" plain style="margin-bottom: 10px" @click="this.approveDialogVisible=false">取消</el-button>
                </span>
                </template>
              </el-dialog>
            </div>
            <!-- 不通過弹窗 -->
            <div>
              <el-dialog
                  v-model="disapproveDialogVisible"
                  title="不通过原因"
                  center
                  width="30%"
                  :custom-class="'rounded-dialog'"
              >
                <el-radio-group v-model="radio" >
                  <el-row>
                    <el-radio :label=1>非本校录取通知书</el-radio>
                  </el-row>
                  <el-radio :label=2>免冠照片与人像面不符</el-radio>
                  <el-radio :label=3>录取通知书姓名与身份证姓名不符</el-radio>
                  <el-radio :label=4>身份证过期</el-radio>
                  <el-radio :label=5>录取通知书上的信息有误</el-radio>
                  <el-radio :label=6>照片中存在遮挡物或修改痕迹</el-radio>
                  <el-radio :label=7>录取通知书的清晰度不足</el-radio>
                </el-radio-group>
                <template #footer>
                <span class="dialog-footer" >
                  <el-button type="primary"  style="margin-bottom: 10px" @click="submitDisapprove">确定</el-button>
                  <el-button type="primary" plain style="margin-bottom: 10px" @click="this.disapproveDialogVisible=false">取消</el-button>
                </span>
                </template>
              </el-dialog>
            </div>


          </div>
        </div>
      </div>
    </div>
  </el-card>

</template>

<script>
import axios from 'axios';
import {ElMessage} from "element-plus";

export default{
  name: "studentCertificationReview",
  data() {
    return {
      ruleForm:[],
      radio: 0,
      // 页面展示的数据集合
      dataList: [],
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      begin: 0,
      end: this.pageSize - 1,
      inputNumber:'',
      studentNum:"",
      admissionNotice:"",
      idCardFace:"",
      idCardNational:"",
      bareheadedPhoto:"",
      admissionNoticeRouter:"",
      admissionNoticeVisible: false,   //录取通知书顯示彈窗
      idCardFaceRouter:"",
      idCardFaceVisible: false,   //身份证人像面彈窗
      idCardNationalRouter:"",
      idCardNationalVisible: false,   //身份证国徽面彈窗
      bareheadedPhotoRouter:"",
      bareheadedPhotoVisible: false,   //免冠照片彈窗
      approveDialogVisible: false,   //通過彈窗
      disapproveDialogVisible:false,
      picRouter:"",
      showButton: false,
      id:0,
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      }
    }

  },
  methods: {
    errorHandler() {
      return true
    },
    handleViewButtonClick(row) {
      // 在这里添加处理点击事件的逻辑，比如跳转到图片详情页面
      console.log('查看头像详情:', row);
    },
    tableRowClassName({row,columnIndex}) {
      console.log(row.state);
      console.log(columnIndex);
      if(row.state === 4){
        return 'warning-row';
      }
      else return "";
    },
    /*顯示所有數據*/
    // 改变数组大小
    sizeChangeHandle(val) {
      this.pageSize = val;
      console.log("输入框内容："+this.inputForm)
      if(this.inputNumber!==null){
        this.searchDataList();
      }
      else{
        this.getDataList();
      }
    },
    // 改变当前页号
    CurrentChangeHandle(val) {
      this.pageIndex = val;
      this.dataList = [];
      if(this.inputNumber!==null){
        this.searchDataList();
      }
      else{
        this.getDataList();
      }
    },
    /*表格數據顯示*/
    //0.分页方法
    getPageInfo(pageSize, pageNum) {
      return {
        "pageSize": pageSize,
        "pageNum": pageNum
      }
    },
    //1.查询所有数据
    async getDataList() {
      try {
        const pageInfo = this.getPageInfo(this.pageSize, this.pageIndex);
        console.log(pageInfo);

        const res = await axios.post('/certificationManage/getCertificationList', pageInfo);

        console.log(res);

        if (res.status === 200) {
          this.dataList = res.data.data.list.map(item => {
            let bareheadedPhotoRouter=null;
            if(item.bareheadedPhoto!=null){
              bareheadedPhotoRouter="http://seedling-classmate.oss-cn-beijing.aliyuncs.com/" + item.bareheadedPhoto;
            }
            return {
              ...item,
              bareheadedPhotoRouter,
            };
          });
          this.totalPage = res.data.data.total;
        } else {
          console.error('Error fetching data:', res.statusText);
          ElMessage('获取表单数据失败');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('获取表单数据失败');
      }
    },
    /*查詢數據*/
    //0.定義删除用户信息
    searchUserInfo(pageSize,pageNum,studentNumber){
      return {
        "pageSize": pageSize, "pageNum": pageNum,"studentNumber": studentNumber
      };
    },
    //1.查询数据
    async searchDataList() {
      try {

        const number = this.inputNumber;

        const searchData = this.searchUserInfo(this.pageSize, this.pageIndex, number);
        console.log("學號為",number);
        if (number) {
          const res = await axios.post('/certificationManage/search', searchData);
          console.log("檢索返回值",res.status);
          if (res.status === 200) {
            this.dataList = res.data.data.list.map(item => {
              let bareheadedPhotoRouter="http://seedling-classmate.oss-cn-beijing.aliyuncs.com/" + item.bareheadedPhoto;
              return {
                ...item,
                bareheadedPhotoRouter,
              };
            });
            this.totalPage = res.data.data.total;
          } else {
            console.error('Error fetching data:', res.statusText);
            ElMessage('获取表单数据失败');
          }
        } else {
          //  ElMessage('请输入搜索条件');
          this.getDataList();
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('出错了');
        this.getDataList();
      }
    },
    /*顯示免冠照片*/
    async getBareheadedPhotoData(item){
      this.studentNum=item.studentNumber;
      this.idCardFaceVisible = true;

      const res = await axios.post('/certificationManage/findBareheadedPhoto/'+item.studentNumber)
      console.log(res.data.data,'图片地址')

      if (res.data.data != null) {
        this.idCardFaceRouter = res.data.data
      }else{
        ElMessage({
          message: '出错了',
        })
      }
    },
    /* 顯示录取通知书*/
    async getAdmissionNoticeData(item){
      this.studentNum=item.studentNumber;
      this.admissionNoticeVisible = true;

      const res = await axios.post('/certificationManage/findAdmissionNotice/'+item.studentNumber)
      console.log(res.data.data,'图片地址')

      if (res.data.data != null) {
        this.admissionNoticeRouter = res.data.data
      }else{
        ElMessage({
          message: '出错了',
        })
      }
    },
    /*顯示身份证人像面*/
    async getIdCardFaceData(item){
      this.studentNum=item.studentNumber;
      this.idCardFaceVisible = true;

      const res = await axios.post('/certificationManage/findIdCardFace/'+item.studentNumber)
      console.log(res.data.data,'图片地址')

      if (res.data.data != null) {
        this.idCardFaceRouter = res.data.data
      }else{
        ElMessage({
          message: '出错了',
        })
      }
    },
    /* 顯示身份证国徽面*/
    async getIdCardNational(item){
      this.studentNum=item.studentNumber;
      this.idCardFaceVisible = true;

      const res = await axios.post('/certificationManage/findIdCardNational/'+item.studentNumber)
      console.log(res.data.data,'图片地址')

      if (res.data.data != null) {
        this.idCardFaceRouter = res.data.data
      }else{
        ElMessage({
          message: '出错了',
        })
      }
    },
    /*通過*/
    //0.獲取該行數據
    //approveData(scope.row)
    async approveData(item){
      this.studentNumber=item.studentNumber;
      this.id=item.id;
      this.approveDialogVisible = true;
    },
    //
    //1.定義删除用户信息
    editUserInfo(id,studentNumber,disapproveReason){
      return {"id":id,"studentNumber":studentNumber,"disapproveReason":disapproveReason};
    },
    //1.通过
    async submitUpdate(){
      const id = this.id;
      const studentNumber = this.studentNumber;
      const editInfo = this.editUserInfo(id,studentNumber,0);
      try {
        const res = await axios.post('/certificationManage/approveRequest',editInfo);

        if (res.data.code === 200) {
          ElMessage({
            message: '操作成功',
            type: 'success',
          }), this.approveDialogVisible= false,
              this.getDataList()
        }else if(res.status == 400) {
          console.error('Error fetching data:', res.statusText);
          ElMessage({
            showClose: true,
            message: '操作失败',
            type: 'error',
          })
        }
      } catch (error) {
        ElMessage({
          showClose: true,
          message: '出错了',
          type: 'warning',
        })
      }
    },
    async disapproveData(item){
      this.studentNumber=item.studentNumber;
      this.id=item.id;
      this.disapproveDialogVisible = true;
    },
    //1.不通过
    async submitDisapprove(){
      const id = this.id;
      const studentNumber = this.studentNumber;
      console.log("選擇",this.radio);
      const editInfo = this.editUserInfo(id,studentNumber,this.radio);
      try {
        const res = await axios.post('/certificationManage/disapproveRequest',editInfo);

        if (res.data.code === 200) {
          ElMessage({
            message: '操作成功',
            type: 'success',
          }), this.disapproveDialogVisible= false,
              this.getDataList()
        }else if(res.status == 400) {
          console.error('Error fetching data:', res.statusText);
          ElMessage({
            showClose: true,
            message: '操作失败',
            type: 'error',
          })
        }
      } catch (error) {
        ElMessage({
          showClose: true,
          message: '出错了',
          type: 'warning',
        })
      }
    },
},


  // Use the beforeCreate hook to initialize the 'end' property
  beforeCreate() {
    this.end = this.pageSize - 1;
  },

  mounted() {
    this.getDataList();
  }
}
</script>

<style scoped lang="scss">
@import "@/theme/common.css";


.el-table .warning-row {
  background:#fef0f0;
}

.avatar-with-button {
  position: relative;
}

.view-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.custom-button {
  color: #3f4148; /* 黑色 */
  background-color: transparent; /* 设置背景为透明 */
}

.custom-button:hover {
  color: #76cb02; /* 绿色 */
}
.refuse-button {
  color: #3f4148; /* 黑色 */
  background-color: transparent; /* 设置背景为透明 */
}

.refuse-button:hover {
  color:#f51a1a;
}

.avatar-button {
  color: #ffffff;
  background-color: transparent;
}

.avatar-button:hover {
  color: #76cb02; /* 绿色 */
}
//搜索框樣式
.form-control {
  position: relative;
  margin: 20px 0 20px;
  width: 190px;
  display: flex;
  align-items: center; /* 设置垂直居中 */
  gap: 10px; /* 设置输入框和按钮之间的间距 */
}

.form-control input {
  background-color: transparent;
  border: 0;
  border-bottom: 2px  #ccc solid;
  display: block;
  width: 100%;
  padding: 10px 0;
  font-size: 18px;
  color: #3f4148;
  flex: 1;
}

.form-control input:focus,
.form-control input:valid {
  outline: 0;
  border-bottom-color: #76cb02;
}

.form-control label {
  position: absolute;
  top: 15px;
  left: 0;
  pointer-events: none;
}

.form-control label span {
  display: inline-block;
  font-size: 15px;
  min-width: 5px;
  color: #ccc;
  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.form-control input:focus+label span,
.form-control input:valid+label span {
  color: #76cb02;
  transform: translateY(-30px);
}

//按鍵2
.search {
  display: inline-block;
  position: relative;
}

.search input[type="text"] {
  width: 200px;
  padding: 10px;
  border: none;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.search button[type="submit"] {
  background-color: #b8e48a;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 0;
  right: 0;
  transition: .9s ease;
}

.search button[type="submit"]:hover {
  transform: scale(1.1);
  color: rgb(255, 255, 255);
  background-color: #76cb02;
}

//el-table樣式
.el-table .success-row {
  background: #f0f9eb;
}


ul {
  list-style: none;
}

.form-control .icon-content {
  margin: 0 10px;
  position: relative;
}

.form-control .icon-content:hover .inputDate {
  opacity: 1;
  visibility: visible;
  top: -50px;
}
.form-control .icon-content .link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #4d4d4d;
  transition: all 0.3s ease-in-out;
}
.form-control .icon-content button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.3s ease-in-out;
}

.form-control .icon-content button:hover {
  color: #76cb02; /* 修改图标颜色 */
}
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');



.row__title{
  color: #53646f;
  font-weight: 400;
  font-size: 20px;
  margin: 0;
}

.row__text{
  color: #53646f;
  font-weight: 500;
  font-size: 15px;
  margin: 0;
}


.table-row__edit {
  width: 12px;
  padding: 8px 17px;
  display: inline-block;
  background-color: #daf3f8;
  border-radius: 18px;
  vertical-align: middle;
  margin-right: 10px;
  cursor: pointer;
}

//圖片樣式
.demo-image__error .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image__error .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.demo-image__error .el-image {
  padding: 0 5px;
  max-width: 300px;
  max-height: 200px;
  width: 100%;
  height: 200px;
}

.demo-image__error .image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

</style>